<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>播放音乐</title>
    <style>
        body {
            display: flex;
            flext-direction: column;
        }
    </style>
</head>
<body>
      <audio src="./music/在你的身边.ogg"></audio>
      <!--这里只要带上controls就可以播放了,视为true -->
      <button class="playPause">播放</button>
      <button class="prev">上一首</button>
      <button class="next">下一首</button>
      <div>当前时间：<span class="currentTime"></span></div>
      <div>总时间：<span class="duration"></span></div>
      <div>
          <input type="text" id="progress"><button class="jumpTo">跳到此处</button>
      </div>
      <button class="volumeUp">声音增加</button>
      <button class="volumeDown">声音减小</button>


      <script>
          var mp3 = ['在你的身边','好想抱住你','爱如火','LIFE','Where']
          var currentIndex = 0
          var playing = false  //代表一开始不是播放状态



          var oAudio = document.querySelector('audio')
          oAudio.volume = 0.5
          document.querySelector('.playPause').onclick = function(){
              //点击就开始播放
              if(playing){
                  //如果是true，就让他播放
                  oAudio.pause()
                  this.textContent = '播放'
              }else{
                  oAudio.play()
                  this.textContent = '暂停'
              }
              playing = !playing
          }


          document.querySelector('.prev').onclick = function () {
              currentIndex--;
              if(currentIndex < 0){
                  currentIndex = 4  //循环，一共有五首歌
              }
              var name = "./music/"+ mp3[currentIndex] +".ogg";
              alert(name)
              oAudio.src = name
          }


          document.querySelector('.next').onclick = function () {
              currentIndex++;
              if(currentIndex >4){
                  currentIndex = 0  //循环，一共有五首歌
              }
              var name = "./music/"+ mp3[currentIndex] +".ogg";
              oAudio.src = name
          }

          oAudio.ontimeupdate = function () {
              var ct = oAudio.currentTime
              ctMin = Math.floor(ct /60)  //floor是向下取整
              ctSe = Math.floor(ct % 60)  //向下取整，取出秒数
              document.querySelector('.currentTime').textContent = ctMin + ":" +ctSe
          }


          oAudio.onloadeddata = function () {
          var dt = oAudio.duration   //持续时间  总时间
          dtMin = Math.floor(dt / 60)  //floor是向下取整
          dtSe = Math.floor(dt % 60)  //向下取整，取出秒数
          document.querySelector('.duration').textContent = dtMin + ":" + dtSe
          }



          document.querySelector('.jumpTo').onclick = function () {
              var p = parseInt(document.querySelector('#progress').value)
              //输入的是本首歌的 %100的进度
              if(p < 0) { p = 0 }
              if(p > 100) { p = 100 }

              var rate = p / 100  * oAudio.duration; //计算比率
              oAudio.currentTime = rate

          }

          document.querySelector('.volumeUp').onclick= function () {
              var volume = oAudio.volume;
              volume += 0.1
              if(volume > 1){
                  volume = 1
              }
              oAudio.volume = volume
          }



          document.querySelector('.volumeDown').onclick= function () {
              var volume = oAudio.volume;
              volume -= 0.1
              if(volume < 0){
                  volume = 0
              }
              oAudio.volume = volume
          }
      </script>
</body>
</html>